<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box>img,#box>video{
    max-width: 30vw;
    max-height: 30vw;
    margin-right: 4px;
    margin-bottom: 4px;
    vertical-align: middle;
}
#box{
    margin-top: 8px;
}
.loading{
    text-align: center;
    margin-bottom: 100px;
}
.del{
    float: right;
    font-size: 14px;
}
.del-active{
    color: red;
}
.pic-box{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
}
.pic-box>img,.pic-box>video{
    max-width: 100%;
}
.pic-box>video{
    max-height: 80vh;
}
</style>
</head>
<body>
<input type="file" onchange="upload(this)" multiple>
<span onclick="changeFlag(this)" class="del">删除</span>
<div id="box" onclick="openPic(event)">
</div>
<div class="pic-box" onclick="closePic(this)">
    <img src="" alt="">
</div>
<div class="loading">loading</div>
<script>
var deleteFlag=false,pics=['jpg','png','jpeg']
function $(ele){
    return document.querySelector(ele)
}
function upload(e){
    if(!e.files.length)return
    var form=new FormData()
    Object.values(e.files).forEach(file=>{
        form.append('file',file)
    })
    fetch('/upload',{method:'POST',body:form}).then(_=>_.json()).then(_=>{
        getList()
    })
}
function getList(){
    fetch('/list').then(_=>_.json()).then(_=>{
        var str=''
        _.forEach(v=>{
            if(pics.includes(v.slice(v.lastIndexOf('.')+1).toLowerCase())){
                str+=`<img src="pic1/${v}">`
            }else{
                str+=`<video src="pic/${v}"></video>`
            }
        })
        $('#box').innerHTML=str
        // $('#box').insertAdjacentHTML('beforeend',str)
    })
}
function openPic(e){
    if(deleteFlag){
        fetch('/delete?name='+e.target.src.slice(e.target.src.lastIndexOf('/')+1))
        e.target.remove()
        return
    }
    if(!e.target.src)return
    if(pics.includes(e.target.src.slice(e.target.src.lastIndexOf('.')+1).toLowerCase())){
        $('.pic-box').innerHTML=`<img src="pic/${e.target.src.slice(e.target.src.lastIndexOf('/')+1)}">`
    }else{
        $('.pic-box').innerHTML=`<video src="${e.target.src}" controls loop></video>`
    }
    $('.pic-box').style.display='flex'
}
function closePic(e){
    e.style.display='none'
}
function changeFlag(e){
    deleteFlag=!deleteFlag
    e.className=deleteFlag?'del del-active':'del'
}
getList()
</script>
</body>
</html>